 
<template>
  <div class="main_wrap">
    <div class="login_logo">
      <img src="#" alt="" />
    </div>
    <form method="post" class="login_form">
      <h1 class="login_title">用户登录</h1>
      <input
        type="text"
        name="username"
        placeholder="用户名"
        class="input_txt"
        autocomplete="off"
        v-model="username"
        @click="errshow = false"
      />
      <input
        type="text"
        name="phone"
        placeholder="手机号"
        class="input_txt"
        autocomplete="off"
        v-model="phone"
        @click="errshow = false"
      />
      <el-row>
        <el-button size="small" @click="getSmsCode" class="btnStyle"
          >获取短信验证码</el-button
        >
        <el-input
          placeholder="请输入验证码"
          v-model="smsCode"
          class="smsCode"
        ></el-input>
      </el-row>

      <input
        type="password"
        name="password"
        placeholder="密码"
        class="input_txt"
        v-model="password"
        autocomplete="on"
        @click="errshow = false"
      />
      <div class="error_tip" v-show="errshow">{{ errmsg }}</div>
      <input type="button" value="登 录" class="input_sub" @click="fnLogin" />
    </form>
  </div>
</template>


<script>
import cons from "@/components/constant";
export default {
  name: "Login",
  data() {
    return {
      errshow: false,
      errmsg: "",
      password: "",
      username: "",
      phone: "",
      smsCode: "",
    };
  },
  methods: {
    // 获取短信验证码
    getSmsCode() {
      this.axios
        .post(cons.apis + "/users/sms_code/", { mobile: this.phone })
        .then((resp) => {
          if (resp.data.code == 200) {
            alert(resp.data.msg);
          }else{
            alert(resp.data.error);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 登录
    fnLogin() {
      if (this.username == "" || this.password == "") {
        this.errmsg = "用户名或密码不能为空";
        this.errshow = true;
        return;
      }
      //http://www.meiduo.site:8000/meiduo_admin/authorizations/
      this.axios
        .post(cons.apis + "/users/logincount/", {
          username: this.username,
          password: this.password,
          mobile: this.phone,
          code: this.smsCode,
        })
        .then((response) => {
          // // 验证码过期
          // if (response.data.code == "204") {
          //   this.errmsg = response.data.msg;
          //   this.errshow = true;
          // }
          // // 验证码错误
          // if (response.data.code == "401") {
          //   this.errmsg = response.data.msg;
          //   this.errshow = true;
          // }


          if (response.data.code == 200) {
            localStorage.clear();
            console.log("登录的响应>>>", response);
            // 保存jwt token的数据
            localStorage.token = response.data.token;
            localStorage.username = response.data.username;
            // console.log("this>>>", this);
            // 跳转到首页
            console.log("跳转到Home页面");
            this.$router.push({ path: "/home" });
            // console.log(this.$route.path);
          }else{
            this.errmsg = response.data.msg;
            this.errshow = true;            
          }
        })
        .catch((error) => {
          this.errmsg = "网络连接问题";
          this.errshow = true;
        });
    },
  },
};
</script>



<style scoped>
.main_wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: linear-gradient(45deg, #e8f2f3, #bcdae7);
}
.login_logo {
  background: rgba(47, 64, 80, 0.6);
  height: 45px;
}
.smsCode {
  width: 140px;
  margin: 20px auto 0px 20px;
}
.btnStyle {
  margin: 20px auto 0px 20px;
}

.login_logo img {
  margin: 5px 0 0 10px;
}

.login_form {
  width: 330px;
  height: 450px;
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -146px;
  margin-left: -165px;
  overflow: hidden;
  border-radius: 6px;
}
.login_form .error_tip {
  position: absolute;
  font-size: 12px;
  color: #f00;
  bottom: 84px;
  left: 18px;
}
.login_title {
  line-height: 72px;
  text-align: center;
  background: linear-gradient(
    90deg,
    rgba(21, 228, 243, 0.959),
    rgba(58, 153, 242, 0.6)
  );
  color: #fff;
  font-size: 20px;
}
.input_txt {
  display: block;
  margin: 20px auto 0;
  width: 298px;
  height: 32px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  outline: none;
  text-indent: 10px;
}
.forget_pass {
  display: block;
  width: 298px;
  margin: 10px auto 0;
  text-align: right;
  font-size: 14px;
  color: #5195d0;
}
.input_sub {
  display: block;
  margin: 40px auto 0;
  width: 298px;
  height: 32px;
  border: 0px;
  border-radius: 4px;
  background: rgba(3, 234, 241, 0.938);
  color: #fff;
  cursor: pointer;
}
.input_sub:hover {
  background: rgba(27, 118, 124, 0.973);
}
</style>
